<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}">
    <!--<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">-->
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/assets/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <!--<link rel="stylesheet" th:href="@{/assets/css/_all-skins.min.css}">-->
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/assets/plugins/iCheck/square/blue.css}">
    <!--<link rel="stylesheet" th:href="@{/assets/css/home.css}">-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--<link href="http://adminlte.la998.com/dist/css/font-awesome.min.css" rel="stylesheet">-->
    <!--<link href="http://adminlte.la998.com/dist/css/ionicons.min.css" rel="stylesheet">-->
    <!--<link href="http://adminlte.la998.com/dist/css/AdminLTE.min.css" rel="stylesheet">-->
    <link href="http://adminlte.la998.com/plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet">
    <!--<link href="http://adminlte.la998.com/plugins/morris/morris.css" rel="stylesheet">-->
    <!--<link href="http://adminlte.la998.com/plugins/datepicker/datepicker3.css" rel="stylesheet">-->
    <!--<link href="http://adminlte.la998.com/plugins/daterangepicker/daterangepicker.css" rel="stylesheet">-->
    <!--<link href="http://adminlte.la998.com/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet">-->


</head>
<body class="hold-transition skin-blue  sidebar-mini">



<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Monthly Recap Report</h3>

        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <div class="btn-group">
                <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-wrench"></i></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <div class="row">
            <div class="col-md-8">
                <p class="text-center">
                    <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
                </p>

                <div class="chart">
                    <!-- Sales Chart Canvas -->
                    <canvas id="salesChart" style="height: 180px; width: 703px;" height="337" width="1318"></canvas>
                </div>
                <!-- /.chart-responsive -->
            </div>
            <!-- /.col -->
            <div class="col-md-4">
                <p class="text-center">
                    <strong>Goal Completion</strong>
                </p>

                <div class="progress-group">
                    <span class="progress-text">Add Products to Cart</span>
                    <span class="progress-number"><b>160</b>/200</span>

                    <div class="progress sm">
                        <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                    </div>
                </div>
                <!-- /.progress-group -->
                <div class="progress-group">
                    <span class="progress-text">Complete Purchase</span>
                    <span class="progress-number"><b>310</b>/400</span>

                    <div class="progress sm">
                        <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                    </div>
                </div>
                <!-- /.progress-group -->
                <div class="progress-group">
                    <span class="progress-text">Visit Premium Page</span>
                    <span class="progress-number"><b>480</b>/800</span>

                    <div class="progress sm">
                        <div class="progress-bar progress-bar-green" style="width: 80%"></div>
                    </div>
                </div>
                <!-- /.progress-group -->
                <div class="progress-group">
                    <span class="progress-text">Send Inquiries</span>
                    <span class="progress-number"><b>250</b>/500</span>

                    <div class="progress sm">
                        <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
                    </div>
                </div>
                <!-- /.progress-group -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- ./box-body -->
    <div class="box-footer">
        <div class="row">
            <div class="col-sm-3 col-xs-6">
                <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
                    <h5 class="description-header">$35,210.43</h5>
                    <span class="description-text">TOTAL REVENUE</span>
                </div>
                <!-- /.description-block -->
            </div>
            <!-- /.col -->
            <div class="col-sm-3 col-xs-6">
                <div class="description-block border-right">
                    <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
                    <h5 class="description-header">$10,390.90</h5>
                    <span class="description-text">TOTAL COST</span>
                </div>
                <!-- /.description-block -->
            </div>
            <!-- /.col -->
            <div class="col-sm-3 col-xs-6">
                <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
                    <h5 class="description-header">$24,813.53</h5>
                    <span class="description-text">TOTAL PROFIT</span>
                </div>
                <!-- /.description-block -->
            </div>
            <!-- /.col -->
            <div class="col-sm-3 col-xs-6">
                <div class="description-block">
                    <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
                    <h5 class="description-header">1200</h5>
                    <span class="description-text">GOAL COMPLETIONS</span>
                </div>
                <!-- /.description-block -->
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.box-footer -->
</div>



<!-- ./wrapper -->
<script>
    var basePath = "";
</script>
<!-- jQuery 3 -->
<script th:src="@{/assets/js/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/assets/js/adminlte.js}"></script>

<!--<script src="http://adminlte.la998.com/plugins/jQuery/jquery-2.2.3.min.js"></script>-->
<!--<script src="http://adminlte.la998.com/bootstrap/js/bootstrap.min.js"></script>-->
<!--<script src="http://adminlte.la998.com/plugins/fastclick/fastclick.js"></script>-->
<script src="http://adminlte.la998.com/dist/js/app.min.js"></script>
<!--<script src="http://adminlte.la998.com/plugins/sparkline/jquery.sparkline.min.js"></script>-->
<script src="http://adminlte.la998.com/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="http://adminlte.la998.com/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!--<script src="http://adminlte.la998.com/plugins/slimScroll/jquery.slimscroll.min.js"></script>-->
<script src="http://adminlte.la998.com/plugins/chartjs/Chart.min.js"></script>
<script src="http://adminlte.la998.com/dist/js/pages/dashboard2.js"></script>
<script src="http://adminlte.la998.com/dist/js/demo.js"></script>


</body>
</html>